<template>
    <div class="s-canvas" @click="refresh()">
        <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
    </div>
</template>
<script lang="ts">
export default {
    // name: "identity",
};
</script>
<script lang="ts" setup>
import { useDheader } from "../store/Dheader";
const Dheader = useDheader();
const {
    fontSizeMin,
    fontSizeMax,
    backgroundColorMin,
    backgroundColorMax,
    colorMin,
    colorMax,
    lineColorMin,
    lineColorMax,
    dotColorMin,
    dotColorMax,
    contentWidth,
    contentHeight
} = defineProps({
    fontSizeMin: {
        type: Number,
        default: 30
    },
    fontSizeMax: {
        type: Number,
        default: 40
    },
    backgroundColorMin: {
        type: Number,
        default: 180
    },
    backgroundColorMax: {
        type: Number,
        default: 240
    },
    colorMin: {
        type: Number,
        default: 50
    },
    colorMax: {
        type: Number,
        default: 160
    },
    lineColorMin: {
        type: Number,
        default: 40
    },
    lineColorMax: {
        type: Number,
        default: 180
    },
    dotColorMin: {
        type: Number,
        default: 0
    },
    dotColorMax: {
        type: Number,
        default: 255
    },
    contentWidth: {
        type: Number,
        default: 112
    },
    contentHeight: {
        type: Number,
        default: 40
    }
});

// 生成一个随机数
const randomNum = (min: number, max: number) => {
    return Math.floor(Math.random() * (max - min) + min);
};
// 生成一个随机的颜色
const randomColor = (min: any, max: any) => {
    let r = randomNum(min, max);
    let g = randomNum(min, max);
    let b = randomNum(min, max);
    return "rgb(" + r + "," + g + "," + b + ")";
};

const drawPic = () => {
    let canvas = document.getElementById("s-canvas") as any;
    let ctx = canvas.getContext("2d");
    ctx.textBaseline = "bottom";
    // 绘制背景
    ctx.fillStyle = randomColor(backgroundColorMin, backgroundColorMax);
    ctx.fillRect(0, 0, contentWidth, contentHeight);
    // 绘制文字
    for (let i = 0; i < Dheader.header.row1.login.identifyCode.length; i++) {
        drawText(ctx, Dheader.header.row1.login.identifyCode[i], i);
    }
    drawLine(ctx);
    drawDot(ctx);
};
const drawText = (ctx: any, txt: string, i: number) => {
    ctx.fillStyle = randomColor(colorMin, colorMax);
    ctx.font = randomNum(fontSizeMin, fontSizeMax) + "px SimHei";
    let x = (i + 1) * (contentWidth / (Dheader.header.row1.login.identifyCode.length + 1));
    let y = randomNum(fontSizeMax, contentHeight - 5);
    var deg = randomNum(-45, 45);
    // 修改坐标原点和旋转角度
    ctx.translate(x, y);
    ctx.rotate((deg * Math.PI) / 180);
    ctx.fillText(txt, 0, 0);
    // 恢复坐标原点和旋转角度
    ctx.rotate((-deg * Math.PI) / 180);
    ctx.translate(-x, -y);
};
const drawLine = (ctx: any) => {
    // 绘制干扰线
    for (let i = 0; i < 8; i++) {
        ctx.strokeStyle = randomColor(lineColorMin, lineColorMax);
        ctx.beginPath();
        ctx.moveTo(randomNum(0, contentWidth), randomNum(0, contentHeight));
        ctx.lineTo(randomNum(0, contentWidth), randomNum(0, contentHeight));
        ctx.stroke();
    }
};
const drawDot = (ctx: any) => {
    // 绘制干扰点
    for (let i = 0; i < 100; i++) {
        ctx.fillStyle = randomColor(0, 255);
        ctx.beginPath();
        ctx.arc(randomNum(0, contentWidth), randomNum(0, contentHeight), 1, 0, 2 * Math.PI);
        ctx.fill();
    }
};
const refresh = () => {
    let str = "";
    for (let i = 0; i < 4; i++) str += Math.floor(Math.random() * 10);
    Dheader.header.row1.login.identifyCode = str;
    drawPic();
};
onMounted(() => {
    drawPic();
});
</script>
<style scoped>
.s-canvas {
    height: 40px;
    width: fit-content;
}
</style>
